<template>
<div>
            
            <div class="subHeader">
            <el-input class="right" placeholder="请输入项目名称" style="width:350px;float:right;" v-model="searchKey">
                <span slot="append">
                    <i :size="16" class="el-icon-search" @click="searchProjectList"></i>
                </span>
            </el-input>
            </div>
            <div class="projects-container">
                    <el-card class="project-item" v-for="item in projectList" :key="item.id"> 
                        <nuxt-link to="/project/?a=a">                       
                    <img :src="item.img" class="image">
                    <div class="book-text-area">
                        <h4 class="book-title">{{item.name}}</h4>                
                        <h5 class="book-desc">{{item.desc}}</h5>
                    </div>
                        </nuxt-link>
                    <div class="setting-cover">
                        <i class="setting-icon el-icon-view"></i>
                        <i class="setting-icon el-icon-share"></i>
                        <i class="setting-icon el-icon-info"></i>
                    </div>
                    </el-card>

                    <el-card class="project-item new-project-item">       
                        <h4 class="book-title">新建项目</h4>
                        <h5 class="book-desc"></h5>
                    
                    </el-card>
                    
                </div>  
            <el-pagination
                class="pager"
                background
                layout="prev, pager, next"
                :hide-on-single-page="true"
                :page-size="30"
                :total="allProjectList.length">
                </el-pagination>
</div>    
</template>
<script>
export default {
    layout:"default",
    components:{
        
    },
    data: () => ({
      searchKey:"",
      allProjectList:[{
          id:1,
          img:"../static/book.png",
          name:"第一个项目",
          desc:"不完美的她"
      },{
          id:2,
          img:"../static/1.png",
          name:"第二个项目",
          desc:"不完美的她"
      },{
          id:3,
          img:"../static/3.png",
          name:"第三个项目",
          desc:"不完美的她"
      },{
          id:4,
          img:"../static/5.png",
          name:"第四个项目",
          desc:"不完美的她"
      }],
      projectList:[],
      teamList:[],
      eventList:[],
    }),
    created:function(){
        this.projectList=this.allProjectList;
    },
    methods:{
        searchProjectList:function(){
            this.projectList=this.allProjectList.filter(a=>a.name.indexOf(this.searchKey)>-1);
        }
    }
}
</script>
<style lang="scss">


.projects-container {
    display: flex;
    flex-wrap: wrap;    
    align-content: flex-start;
    justify-content: flex-start;
    padding: 1px 1px 29px;
    
    .project-item {
        position: relative;
        width: 143px;
        height: 190px;
        background-color: #909399;
        margin: 0 30px 30px;
        border-radius: 5px;
        cursor: pointer;
        color: #fff;
        border: none;
        background-size: 100% 100%
    }
    .book-desc{
        font-weight: inherit;
        font-size: 12px;
    }
    .project-item img{
        position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 0;
    }
    .project-item:hover {
        -webkit-box-shadow: 0 6px 17px 5px rgba(70,70,70,.25)!important;
        box-shadow: 0 6px 17px 5px rgba(70,70,70,.25)!important;
        margin-top: -8px
    }

    .project-item .collect {
        position: absolute;
        top: 0;
        right: 10px
    }

    .project-item .collect .un-collect {
        display: none
    }

    .project-item:hover .collect .un-collect {
        display: block
    }

    .new-project-item {
        color: #909399;
        background: url() 51px 103px no-repeat
    }

    .new-project-item:hover {
        background: url() 51px 103px no-repeat;
        color: #409eff
    }

    .book-text-area {
        position: absolute;
        z-index: 1;
        top: 40px;
        left: 10%;
        width: 80%;
        text-shadow: 0 0 10px #9c9c9c
    }

    .book-title {
        text-align: center;
        margin-top: 10px;
        word-break: break-all
    }

    a,.desc-text {
        color: #fff;
        text-align: center;
        margin-top: 40px;
        z-index: 1
    }

    .setting-cover {
        opacity: 0;
        position: absolute;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 30px;
        line-height: 30px;
        color: #545454;
        font-size: 18px;
        background: hsla(0,0%,100%,.7);
        -webkit-transition: .5s;
        transition: .5s;
        text-align: right;

    }

    .setting-icon {
        margin: 3px 10px 0 5px
    }

    .project-item:hover .setting-cover {
        opacity: 1
    }
}


</style>